import ProCard from '@ant-design/pro-card';
import { PageContainer } from '@ant-design/pro-layout';
import React, { useState } from 'react';

type DetailsType = {
  id: string;
  name: string;
  createdOrganizationName: string;
};

export default (): React.ReactNode => {
  const [visible, setVisibleState] = useState<string>('table');

  const [visibleData, setVisibleDataState] = useState<DetailsType>();

  const onDetails = (id: string, name: string, createdOrganizationName: string) => {
    setVisibleState('details');
    setVisibleDataState({ id, name, createdOrganizationName });
  };

  const onBack = () => {
    setVisibleState('table');
  };

  const container = () => {
    if (visible === 'table') {
      return <TableTopic onDetails={onDetails} />;
    } else if (visible === 'details') {
      return <DetailsTopic onBack={onBack} id={visibleData?.id} name={visibleData?.name} />;
    }
  };
  return (
    <PageContainer
      fixedHeader
      header={{
        title: '页面标题',
        breadcrumb: {
          items: [],
        },
      }}
      tabList={[
        {
          tab: '已选择',
          key: '1',
        },
        {
          tab: '可点击',
          key: '2',
        },
        {
          tab: '禁用',
          key: '3',
          disabled: true,
        },
      ]}
    >
      <ProCard direction="column" ghost gutter={[0, 16]}>
        <ProCard style={{ height: 200 }} />
        <ProCard gutter={16} ghost>
          <ProCard colSpan={16} style={{ height: 200 }} />
          <ProCard colSpan={8} style={{ height: 200 }} />
        </ProCard>
        <ProCard gutter={16} ghost>
          <ProCard colSpan={8} style={{ height: 200 }} />
          <ProCard colSpan={16} style={{ height: 200 }} />
        </ProCard>
      </ProCard>
    </PageContainer>
  );
};
